<template>
  <div class="view">
    <div class="t_page">
      <div class="t_page2">
        <div class="t_nav">
          <h1>通知编辑页</h1>
          <div class="t_nav_div">
            <div style="width: 145px;margin-left: 30px">
              <el-upload
                class="upload-demo"
                multiple
                :action="imgUrl"
                :on-success="imgUpDone"
                :limit="1">
                <a href="#">插入图片</a>
              </el-upload>
            </div>
          </div>
        </div>
        <div class="t_info">
          <el-form :model="Announcement" label-position="top" :rules="AnnouncementRules" ref="AnnouncementForm" label-width="100px" class="demo-ruleForm" >
            <el-form-item label="通知标题" prop="title" >
              <el-input v-model="Announcement.title"></el-input>
            </el-form-item>
            <br>
            <el-form-item label="摘要" prop="absrtact" >
              <el-input v-model="Announcement.absrtact"></el-input>
            </el-form-item>
            <br>


            <el-form-item label="是否为重要公告" prop="fsfwzygg">
              <el-select v-model="Announcement.fsfwzygg" placeholder="是否为重要公告" style="width: 200px">
                <el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.value" style="text-indent: 1em"></el-option>
              </el-select>
            </el-form-item>
            <br>
            <el-form-item label="通知内容" prop="content">
              <mavon-editor
                ref=md
                @imgAdd="$imgAdd"
                @imgDel="$imgDel"
                :box-shadow="false"
                v-model="Announcement.content"
                :toolbars="toolbars" >
              </mavon-editor>
            </el-form-item>
          </el-form>
          <br>
        </div>

        <div class="t_button">
          <div>
            <a href="#" class="but" @click="back">取消</a>
            <a href="#" class="but" @click="push">{{ pushText }}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import myConfig from "../common/myConfig";
export default {
  name: "InformEditor",
  data(){
    return{
      options: [{
        value: 0,
        label: '否'
      }, {
        value: 1,
        label: '是'
      }],
      pushText: "发布通知",
      imgUrl: myConfig.url + "announcement/announcementCoverUpload",
      Announcement: {
        id: null,
        ggtp: "",
        title: "",
        absrtact: "",
        content: "",
        fsfwzygg: null,
        status: 0,
        createUser: JSON.parse(window.localStorage.getItem("userInfo")).ausername,
      },
      AnnouncementRules:{
        title: [
          { required: true, message: '请输入通知标题', trigger: 'blur' }
        ],
        absrtact: [
          { required: true, message: '请输入摘要内容', trigger: 'blur' },
        ],
        content: [
          { required: true, message: '请输入通知内容', trigger: 'blur' },
        ],
        fsfwzygg: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        createUser: [],
      },
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: false, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      },
    }
  },
  methods: {
    back(){
      this.$router.replace("/informNotice")
    },
    imgUpDone(res){
      this.Announcement.ggtp = res
    },
    push(){
      this.$refs["AnnouncementForm"].validate((valid) => {
        if (valid) {
          this.$axios({
            url: "/announcement/add",
            method: "post",
            data: this.Announcement,
          }).then(res=>{
            if (res.data){
              this.$message.info("发布成功！")
              this.$refs["AnnouncementForm"].resetFields()
              this.$router.push("/informNotice")
            }else {
              this.$message.info("发布失败！")
            }
          }).catch((err)=>{
            this.$message.info("发布失败！")
          })
        } else {
          this.$message.error("请检查填写字段！")
          return false;
        }
      });
    },
    $imgAdd(pos, $file){
      // 第一步.将图片上传到服务器.
      let formData = new FormData();
      formData.append('image', $file);
      this.$axios({
        url: '/imgUpload',
        method: 'post',
        data: formData,
        headers: { 'Content-Type': 'multipart/form-data' },
      }).then((url) => {
        // 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
        /**
         * $vm 指为mavonEditor实例，可以通过如下两种方式获取
         * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
         * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
         */
        this.$refs.md.$img2Url(pos, url.data);
      })
    },
    $imgDel($file){
      this.$axios({
        url: "/removeFile",
        method: "post",
        params: {
          filePath: $file[0]
        }
      }).then(res=>{
        console.log(res.data)
      })
    },
  },
  created() {
    let id = this.$route.params.id
    if (id!=null){
      this.pushText = "修改通知"
      this.$axios({
        url: "/announcement/getOne",
        method: "get",
        params: {
          id: id
        }
      }).then(res=>{
        this.Announcement = res.data
      })
    }
  }
}
</script>

<style src="../css/InformEditor.css" scoped></style>
<style scoped>
.view{
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #D6E0F9;
}
</style>
